import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import MaterialIcons  from 'react-native-vector-icons/MaterialIcons';
import Setting from "../Components/Setting";
import FlexDemo from "./FlexDemo";
import ChatListPage from "./ChatListPage";
import PersonPage from "./PersonPage";


export default function Home(){

    const Tab = createBottomTabNavigator();

    return (
        <Tab.Navigator>
        <Tab.Screen name="聊天" component={ChatListPage} options={{
          tabBarLabel: '聊天', tabBarIcon: ({ color }) => (
            <MaterialIcons name="chat" color={color} size={26} />
          )
        }} />
        <Tab.Screen name="通讯录" component={Setting} options={{
            tabBarLabel:'通讯录',
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="people" color={color} size={26} />
          )
        }} />
        <Tab.Screen name="发现" component={FlexDemo} options={{
            tabBarLabel:'发现',
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="camera" color={color} size={26} />
          )
        }} />
        <Tab.Screen name="我" component={PersonPage} options={{
            tabBarLabel:'我',
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="account-circle" color={color} size={26} />
          )
        }} />
        </Tab.Navigator>
    )
}

